<script setup lang='ts'>import { onMounted, ref } from 'vue';
import bounce from '../../bounce.module.css'
import type { UserInfo } from '../../store/index'
import { useUserStore } from '../../store/index'
import UserCard from '../popCard/UserInfo/index.vue'
import fade from '../../myFade.module.css'
import gsap from 'gsap'

const navList = ref([
    {
        title: '大会员',
        icon: 'iconfont icon-dahuiyuan'
    },
    {
        title: '消息',
        icon: 'iconfont icon-message'
    },
    {
        title: '动态',
        icon: 'iconfont icon-trends'
    },
    {
        title: '收藏',
        icon: 'iconfont icon-collection'
    },
    {
        title: '历史',
        icon: 'iconfont icon-history'
    },
    {
        title: '创作中心',
        icon: 'iconfont icon-creative-center'
    }
])
const toggleBounce = (e: Event) => {
    const dom = e.target as HTMLElement
    dom.classList.toggle(bounce.animate__bounce)
}
const listRef = ref<HTMLElement>()
const isScroll = ref(false)
const setScroll = (flag: boolean) => {
    isScroll.value = flag
    if (flag) {
        (listRef.value as HTMLElement).classList.add('scroll')
    } else (listRef.value as HTMLElement).classList.remove('scroll')
}

const userInfo = ref<UserInfo | null>({
    name: 'TES2022输越南',
    img: '/src/img/face.jpg',
    lv: 5,
    ex: 28530,
    coins: 1185.8,
    bCoins: 0,
    sub: 36,
    fans: 1,
    trends: 147
})

const store = useUserStore()
onMounted(async () => {
    if (store.token && login()) {
        userInfo.value = await store.getData()
    } else {
        userInfo.value = null
    }
})
const login = () => {
    return true
}
const timer = ref(0)
const flagList = ref<{ [k: number | string]: boolean }>({
    0: false
})
const onMouseenter = (index: number, e: Event) => {
    window.clearTimeout(timer.value)
    if (flagList.value[index] !== undefined) {
        timer.value = setTimeout(() => {
            flagList.value[index] = true
        }, 300);

    }

}
const onMouseleave = (index: number, e: Event) => {
    window.clearTimeout(timer.value)
    Object.keys(flagList.value).forEach((key: string) => {
        flagList.value[key] = false
    })
}
const faceRef = ref<HTMLElement>()
const isShowBig = ref(false)
const enter = (el: HTMLElement) => {
    isShowBig.value = true
    gsap.to(faceRef.value as HTMLElement, {
        transform: 'scale(1)',
        zIndex: 9999,
        x: -64,
        duration: .5
    })
    gsap.fromTo(el, {
        opacity: 0,
        y: -2
    }, {
        opacity: 1,
        y: 0,
        duration: .3
    })
}
const leave = (el: HTMLElement, done: Function) => {
    gsap.to(faceRef.value as HTMLElement, {
        transform: 'scale(.5)',
        zIndex: 9999,
        // y: 0,
        // x: 0,
        duration: .5,
        onComplete: function () {
            isShowBig.value = false
            done()
        }
    })
    gsap.to(el, {
        opacity: 0,
        y: -2,
        duration: .5,
    })
}
defineExpose({
    setScroll
})
</script>
<template>
    <div class="rightNavBar-box">
        <ul class="nav-list" ref="listRef">
            <li class="item" @mouseenter="onMouseenter(0,$event)" @mouseleave="onMouseleave(0,$event)">
                <div>
                    <div class="item-user" :style="userInfo?'border:2px solid #fff':''" :class="isShowBig?'hidden':''">
                        <img class="user-img" :src="userInfo?.img" alt="" v-if="userInfo">
                    </div>

                    <a class="big-face" href="javascript:;" ref="faceRef" :class="!isShowBig?'hidden':''">
                        <img :src="userInfo?.img" alt="">
                    </a>
                    <div class="noLogin" v-if="!userInfo">登录</div>
                </div>
                <Transition @enter="enter" @leave="leave">
                    <div class="popCard first" v-if="flagList[0]">
                        <user-card :userInfo="(userInfo as UserInfo)"></user-card>
                    </div>
                </Transition>

            </li>
            <li class="item item-nomal" v-for="(item, index) in navList"
                :class="bounce.animate__animated+' '+(index==navList.length-1?'item-last':'')"
                @mouseenter="toggleBounce" @mouseleave="toggleBounce">
                <div class="icon" :class="item.icon">
                </div>
                <div class="title">{{item.title}}</div>
                <!-- <div class="popCard"></div> -->
            </li>
            <li class="item item-upload">
                <span class="iconfont icon-shangchuan" style="font-size: 20px; margin-right: 6px;"></span>
                <span>投稿</span>
                <!-- <div class="popCard"></div> -->
            </li>
        </ul>
    </div>
</template>
<style lang='less' scoped>
.rightNavBar-box {
    width: 472px;
    height: 50px;
    margin-left: 20px;
    flex-shrink: 0;

    // background-color: aqua;
    .scroll {
        li {
            color: #000 !important;
        }

    }

    .nav-list {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;



        .item {
            position: relative;
            color: white;
            cursor: pointer;

            .item-user {
                width: 36px;
                height: 36px;
                margin-right: 10px;
                border-radius: 50%;
                overflow: hidden;

                .noLogin {
                    background-color: rgb(0, 13, 255);
                    text-align: center;
                    font-size: 14px;
                    line-height: 36px;

                }

            }

            .big-face {
                position: absolute;
                left: 0;
                top: 0;
                width: 82px;
                height: 82px;
                transform-origin: top left;
                transform: scale(.5);
                overflow: hidden;
                margin-right: 10px;
                border-radius: 50%;
                border: 2px solid #fff;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .hidden {
                visibility: hidden;
            }

            .popCard {
                z-index: 999;
                position: absolute;
                border-radius: 8px;
                background-color: #fff;
                border: 1px solid var(--line_regular);
                margin-left: -5px;
                margin-top: 10px;
            }

            .first {
                left: -168px;
            }

        }

        .item-nomal {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            color: white;
            min-width: 50px;
            height: 50px;

            .icon {
                font-size: 20px !important;
            }
        }

        .item-last {
            padding-right: 10px;
        }

        .item-upload {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            line-height: 20px;
            width: 90px;
            height: 34px;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color .3s;
            background-color: #fb7299;
        }
    }
}
</style>